<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <!-- 
        请补全JavaScript代码，要求根据下拉框选中的条件变换重新渲染列表中展示的商品，且只展示符合条件的商品。
        注意：
        1. 必须使用DOM0级标准事件（onchange）
        2. 建议使用ES6的filter方法
     -->
    <select name="" id="">
        <option value="0">请选择价格范围</option>
        <option value="1">&lt100</option>
        <option value="2">100~500</option>
        <option value="3">&gt500</option>
    </select>
    <ul>
        <li>牛客logo马克杯</li>
        <li>无盖星空杯</li>
        <li>老式茶杯</li>
        <li>欧式印花杯</li>
    </ul>

    <script>
        var cups = [
            { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
            { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
            { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
            { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
        ]
        var select = document.querySelector('select');
        var ul = document.querySelector('ul');
        // 补全代码
        select.onchange = () => {
            console.log(select.value)
            if (select.value === '0') {
                listRendering(cups)
            } else if (select.value === '1') {
                Price(0, 100)
            } else if (select.value === '2') {
                Price(100, 500)
            } else {
                Price(500)
            }
        }
        function listRendering(arr) {
            var str = ''
            arr.forEach(element => {
                str += `<li>${element.name}</li>`
            })
            ul.innerHTML = str
        }
        function Price(val, val2) {
            if (val2) {
                let arr = cups.filter(value => {
                    return (value.sales >= val && value.sales < val2)
                })
                listRendering(arr)
            } else {
                let arr = cups.filter(value => {
                    return value.sales > val
                })
                listRendering(arr)
            }

        }


    </script>
</body>

</html>